<template>
	<div id="app">
		<div id="main">
			<!-- 面包屑导航 -->
			<div v-if="model === 'breadcrumb'" id="breadcrumb-box">
				<JsBreadcrumb ref="breadcrumb" />
				<div class="flex-hen tab-button" style="width: 60px;">
					<el-tooltip effect="dark" content="刷新页面" placement="bottom">
						<i style="font-size: 1.3rem;" class="c-theme hand el-icon-refresh" @click="refresh()"></i>
					</el-tooltip>
				</div>
			</div>
			<!-- 多分页导航 -->
			<div v-else id="tab-box">
				<JsTabs hiddenFirst ref="tabs" id="tabs"></JsTabs>
				<div class="flex-hen tab-button">
					<el-tooltip effect="dark" content="刷新页面" placement="bottom"><i class="c-theme hand el-icon-refresh" @click="refresh()"></i></el-tooltip>
					<el-tooltip effect="dark" content="关闭所有页面" placement="bottom"><i class="c-theme hand el-icon-close" @click="closeAll"></i></el-tooltip>
					<el-tooltip effect="dark" content="关闭其他页面" placement="bottom"><i class="c-theme hand el-icon-circle-close" @click="closeOther"></i></el-tooltip>
				</div>
			</div>
		</div>

		<div id="nav">
			<a href="javascript:void(0)" @click="toSkip('/left')">Left</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right')">Right</a>
		</div>

		<div id="nav">
			<a href="javascript:void(0)" @click="toSkip('/left/l1')">Left-1</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/left/l2')">Left-2</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r1')">Right-1</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r2')">Right-2</a>
		</div>

		<div id="nav">
			<a href="javascript:void(0)" @click="toSkip('/left/l1/l11')">Left-11</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/left/l1/l12')">Left-12</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/left/l2/l21')">Left-21</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/left/l2/l22')">Left-22</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r1/r11')">Right-11</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r1/r12')">Right-12</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r2/r21')">Right-21</a>
			|
			<a href="javascript:void(0)" @click="toSkip('/right/r2/r22')">Right-22</a>
		</div>

		<div>
			<!-- 没有参数则默认刷新当前页面 -->
			<button @click="refresh()">刷新页面</button>
			|
			<!-- r2为路由name,也可以传入路由path -->
			<button @click="refresh('/right/r2')">清除Right-2页面</button>
			|
			<button @click="closePage('/right/r2')">关闭并跳转r2</button>
		</div>

		<JsRouter root ref="JsRouter"></JsRouter>
	</div>
</template>

<script>
import jiess from '@/jiess';
export default {
	name: 'home',
	components: {
		//使用内置的JsTabs组件
		JsTabs: jiess.JsTabs,
		//使用内置的JsBreadcrumb组件
		JsBreadcrumb: jiess.JsBreadcrumb
	},
	data() {
		return {
			model: 'tabs',
			// model: 'breadcrumb'
		};
	},
	methods: {
		refresh(name) {
			this.$refs.JsRouter?.toReload(name);
		},
		closeAll() {
			this.$refs.JsRouter?.clearAll();
			this.$refs.tabs.closeAll();
		},
		closeOther() {
			const keeps = ['home', this.$route.name];
			this.$refs.JsRouter?.clearOther(keeps);
			this.$refs.tabs.closeOther(keeps);
		},
		toSkip(path) {
			this.toRoute(path)
		}
	}
};
</script>

<style lang="scss">
html,
body {
	margin: 0;
}

#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;

	#tab-box {
		left: 0;
		right: 0;
		z-index: 4;
		height: 39px;
	}

	#breadcrumb-box {
		left: 0;
		right: 0;
		z-index: 4;
		text-align: left;
		padding: 0.6rem 1rem;
		background-color: white;
		border-bottom: 1px solid #eee;
	}

	.tab-button {
		top: 0;
		right: 0;
		width: 100px;
		height: 42px;
		margin-right: 20px;
		font-size: 1.6rem;
		color: #999;
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: space-around;
	}
}

#nav {
	padding: 30px;
}

#nav a {
	font-weight: bold;
	color: #2c3e50;
}

#nav a.a-exact-active {
	color: #42b983;
}
</style>
